<template>
  <div>
    <div class="login-container">
      <div class="wraper">
        <h1>chat</h1>
        <mt-navbar v-model="selected">
          <mt-tab-item id="login1"><span>登录</span></mt-tab-item>
          <mt-tab-item id="register2"><span>注册</span></mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="login1">
            <!--<el-input placeholder="请输入内容" v-model="input10" clearable>-->
            <!--</el-input>-->
            <Loginpc></Loginpc>
            <!--<form class="mui-input-group">-->
            <!--<form class="mui-input-group">-->
              <!--<div class="mui-input-row">-->
               <!---->
                <!--<input type="text" class="mui-input-clear" placeholder="请输入用户名">-->
              <!--</div>-->
              <!--<div class="mui-input-row">-->
                <!---->
                <!--<input type="password" class="mui-input-clear mui-input-password" placeholder="请输入密码">-->
              <!--</div>-->
            <!--</form>-->
          </mt-tab-container-item>
          <mt-tab-container-item id="register2">
            <Registerpc class='rre' :class="{active: selectedVal}" @ziTologin='fuTologin' ></Registerpc>
          </mt-tab-container-item>
        </mt-tab-container>
        <!--<div class="top">-->
          <!--<router-link to="/login/loginpc">登录</router-link>-->
          <!--<router-link to="/login/registerpc" class="right">注册</router-link>-->
        <!--</div>-->
        <!--<router-view class="view"></router-view>-->
      </div>
    </div>
  </div>
</template>

<script>
  import Loginpc from './Loginpc'
  import Registerpc from './Registerpc'
  export default {
    data() {
      return {
        selected: 'login1',
        // false: 不展示注册页面 true：展示注册页面
        selectedVal: false
      }
    },
    watch: {
      selected(newVal) {
        console.log(newVal)
        if (newVal === 'register2') {
          this.selectedVal = true
        } else if (newVal === 'login1') {
          this.selectedVal = false
        }
      }
    },
    components: {
      Loginpc,
      Registerpc
    },
    methods: {
      fuTologin() {
        this.selected = 'login1'
      }
    }
  }
</script>

<style lang='scss'  scoped>
.login-container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fbfee9;
  overflow: hidden;
  color: #40485b;
  text-align: center;
  z-index: 20;
  .wraper{
    width: 80%;
    height: 80%;
    vertical-align: middle;
    margin:0 auto;
    padding-top: 10%;
    flex-direction:column ;
    h1{
      height: 60px;
      font-size: 30px;
      font-weight: 700;
    }
    .top{
      flex: 0 0 50px;
      display: flex;
      font-size: 20px;
      width: 100%;
      justify-content: space-between;
      a{
        display: inline-block;
        width: 60px;
        height: 25px;
        line-height: 25px;
        color:orangered ;
        &.active{
          color: black;
        }
      }
      .right{
        font-size: 10px;
        text-align: right;
      }
    }
    .view{
      flex: 1;
    }
  }
}

.mint-navbar{
  background: #fbfee9 !important;
  a{
    color: red;
    &:last-child{
      text-align: right;
      span{
        font-size: 14px!important;
      }
    }
    &:first-child{
      text-align: left;
      span{
        font-size: 18px!important;
      }
    }
  }
}
.mint-tab-item.is-selected{
  color: black;
  border-bottom: none;
}
.mint-cell.mint-field{
  background: #fbfee9 !important;
}
.mint-cell-value .mint-field-clear{
 margin-bottom: 15px!important;
}
.rre{
  transition: all 0.5s ease;
  transform: translateX(100%);
  &.active{
    transform: translateX(0)
  }
}
</style>
